<template>
  <!-- 歌词详情页面 -->
  <div class="lyric">
    <!-- <div class="bgImg" :style="{backgroundImage:lyricDetail.al.picUrl}"></div> -->
    <img
      class="bg"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic01.1sucai.com%2F170307%2F330897-1F30FU91530.jpg&refer=http%3A%2F%2Fpic01.1sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634461983&t=ca73fef81b993fe452231ae872f8e4e6"
      alt
    />
    <div class="lyric-top">
      <div class="back" @click="$emit('back')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuojiantou" />
        </svg>
      </div>
      <div class="center">
        <div class="title">{{lyricDetail.al.name}}</div>
      </div>
      <div class="share">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fx310" />
        </svg>
      </div>
    </div>
    <!-- <div class="lyric-img" v-if="isLyric" @click="isLyric=!isLyric">
      <img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ab.png" alt />
      <img class="disc" src="@/assets/img/disc-plus.png" alt />
      <img class="header" :src="lyricDetail.al.picUrl" alt />
    </div>-->
    <div class="lyric-content" ref="playLyric" @click="isLyric=!isLyric">
      <p
        :class="{active:(currentTime*1000>=item.pre&&currentTime*1000<=item.time)}"
        v-for="(item,i) in $store.getters.lyricList"
        :key="i"
      >{{item.lyric}}</p>
    </div>
    <div class="progress">{{playTime}}</div>
    <div class="footer">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon--lbxh" />
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
        <use xlink:href="#icon-shangyishoushangyige" />
      </svg>
      <svg v-if="paused" class="icon play" aria-hidden="true" @click="play">
        <use xlink:href="#icon-bofang2" />
      </svg>
      <svg v-else class="icon play" aria-hidden="true" @click="play">
        <use xlink:href="#icon-bofang3" />
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(1)">
        <use xlink:href="#icon-shangyishoushangyige-copy" />
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-bofangliebiao1" />
      </svg>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      value1: 0,
      isLyric: true
    };
  },
  methods: {},
  props: ["lyricDetail", "paused", "play"],
  computed: {
    playTime() {
      if (this.$store.state.currentTime >= 60) {
        this.value1 = parseInt(this.$store.state.currentTime / 60);
        return (
          this.value1 + ":" + (parseInt(this.$store.state.currentTime) % 60)
        );
      } else {
        return this.value1 + ":" + parseInt(this.$store.state.currentTime);
      }
    },
    ...mapState(["currentTime", "playCurrentIndex", "playList"])
  },
  watch: {
    currentTime(newValue) {
      let p = document.querySelector(".active");
      // console.log(p);
      let offsetTop = p.offsetTop;
      if (this.$refs.playLyric.scrollTop) {
        this.$refs.playLyric.scrollTop = p.offsetTop / 2;
      }
    }
  },
  methods: {
    goPlay(num) {
      let index = this.playCurrentIndex + num;

      if (index < 0) {
        index = this.playList.length - 1;
      } else if (index > this.playList.length) {
        index = 0;
      }
      this.$store.commit("setPlay", index);
    }
  }
};
</script>
<style scoped lang="less">
.lyric {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .bg {
    position: absolute;
    height: 100vh;
    left: 0;
    top: 0;
    background-size: auto 100%;
    background-position: center;
    filter: blur(30px);
  }
  .lyric-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 7.5rem;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    .center {
      display: flex;
      align-items: center;
      .title {
        font-size: 0.28rem;
        width: 5rem;
      }
      .singer {
        font-size: 0.24rem;
        color: #ccc;
      }
    }
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      margin: 0.2rem;
      fill: #fff;
    }
  }
  .lyric-img {
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    left: 0;
    top: 1.2rem;
    .needle {
      width: 2.5rem;
      height: 2.5rem;
      position: absolute;
      left: 3.5rem;
      z-index: 10;
      transform-origin: 0.3rem 0;
      transform: rotate(-10deg);
      transition: all 1s;
      z-index: 10;
    }
    .needle.active {
      width: 2.5rem;
      height: auto;
      position: absolute;
      left: 3.5rem;
      z-index: 10;
      transform-origin: 0.3rem 0;
      transform: rotate(15deg);
      transition: all 1s;
      color: #fff;
    }
    .disc {
      width: 5rem;
      height: auto;
      position: absolute;
      top: 3.4rem;
      left: calc(50% - 2.5rem);
    }
    .header {
      width: 3.2rem;
      position: absolute;
      height: 3.2rem;
      top: 4.3rem;
      left: 2.2rem;
      border-radius: 50%;
    }
  }
  .lyric-content {
    position: absolute;
    text-align: center;
    width: 7.5rem;
    overflow: scroll;
    height: 8rem;
    left: 0;
    top: calc(50% - 4rem);
    color: #cccccc;
    .active {
      color: white;
      font-size: 0.34rem;
    }
  }
  .progress {
    position: absolute;
    bottom: 1rem;
    right: 0.3rem;
  }
  .footer {
    width: 7.5rem;
    height: 1rem;
    position: absolute;
    display: flex;
    justify-content: space-around;
    bottom: 0.3rem;
    right: 0;
    align-items: center;
    .icon {
      width: 0.5rem;
      height: 0.5rem;
      fill: #fff;
    }
    .play {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>